<template>
	<!-- 直播？ -->
	<div style="margin-top:2px;background:white;padding:0 30rpx" v-if="playerList.length> 0">
		<div class="title acea-row row-between-wrapper" style="padding: 10px 0;">
			<div class="text">
				<div class="name line1">{{title}}</div>
			</div>
			<div @click="$router.push({ path: '/pages/LiveBroadcas/player/index/index'})" class="more">
				更多
				<span class="iconfont icon-jiantou"></span>
			</div>
		</div>
		<div :style="{backgroundColor: config.backgroundColor}">
			<div v-for="(item,index) in playerList" :key="index" class="player_list_li"
				@click="toRoom(item.liveStatus,item.id)">
				<div class="player_list_img">
					<img class="player_list_coverImage" :src="item.coverImage" alt="">
					<div 
					class="player_list_status status_living" 
					v-if="item.liveStatus=='101'"
					>直播中</div>
					<div 
					class="living_nlookers" 
					v-show="item.views!=null" 
					v-if="item.status=='living'"
					>{{item.views}}人气</div>
					<div class="player_list_status status_default" 
					v-if="item.liveStatus=='102'">待开播</div>
					<div class="player_list_status status_finish" 
					v-if="item.liveStatus=='103'">已结束</div>
					<div class="player_list_status status_replay" 
					v-if="item.liveStatus=='replay'">回放</div>
					<div 
					class="replayo_nlookers" 
					v-show="item.views>1" 
					v-if="item.liveStatus=='replay'"
					>{{item.views}} 人气
					</div>
				</div>
				<div style="display:flex">
					<div class="player_list_title">{{item.name}}</div>
					<div class="player_look" @click="toRoom(item.liveStatus,item.id)">围观&nbsp;&rsaquo;</div>
				</div>
			</div>
		</div>
		<!-- <van-dialog
        title="提示"
        :show="authDialogShow"
        message="小程序需要您登录获取您的头像、昵称等信息"
        show-cancel-button
        confirm-button-text="登录"
        @cancel="authDialogShow = false"
        confirm-button-open-type="getUserInfo"
        @getuserinfo="getUserInfo"
    >
    </van-dialog> -->
		<login-dialog ref="logindialog" @confirm="authSuccess"></login-dialog>
	</div>
</template>

<script>
	import {
		getPlayerList
	} from "@/api/public";
	// 判断是否有授权checkAuthentication
	import {
		checkAuthentication
	} from "@/utils";
	import loginDialog from "@/components/loginDialog";
	export default {
		name: "product-list",
		components: {
			loginDialog
		},
		props: {
			config: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				authDialogShow: false,
				playerList: [],//直播列表
				type: '',
				title: '',
				status: '',
				id: '',
			};
		},
		mounted() {
			// console.log("获取的直播列表config",this.config)
			this.getData()
		},
		onShow() {
			this.authDialogShow = false
			this.getData()
		},
		methods: {
			// 初始化数据
			getData() {
				let param = {
					pageSize:this.config.count,
					pageNumber: 1
				}
				getPlayerList(param).then(res => {
					// console.log("获取直播列表是什么",res.data)
					if (res.status == 200) {
						this.playerList = res.data.records;
					}
				})
				this.type = this.config.type;
				this.title = this.config.title;
			},
			//刷新用户信息并跳转
			authSuccess(val) {
				console.log("用户授权过了-----------------------------")
				if (this.status == "living") {
					const url = '/pages/LiveBroadcas/player/room/main?id=' + this.id
					wx.navigateTo({
						url: url
					})
				} else if (this.status == "default") {
					wx.navigateTo({
						url: "/pages/LiveBroadcas/player/notice/main?id=" + this.id
					})
				} else if (this.status == "replay") {
					wx.navigateTo({
						url: "/pages/LiveBroadcas/player/replay/main?id=" + this.id
					})
				}
			},
			//跳转直播间
			toRoom(status, id) {
				this.status = status
				this.id = id
				if (status == "living") {
					//   授权检测
					checkAuthentication().then(() => {
							const url = '/pages/LiveBroadcas/player/room/main?id=' + id
							wx.navigateTo({
								url: url
							})
						})
						.catch(() => {
							this.$refs.logindialog.show();
							// this.authDialogShow = true;
						});
				} else if (status == "default") {
					wx.navigateTo({
						url: "/pages/LiveBroadcas/player/notice/main?id=" + id
					})
				} else if (status == "replay") {
					checkAuthentication().then(() => {
							wx.navigateTo({
								url: "/pages/LiveBroadcas/player/replay/main?id=" + id
							})
						})
						.catch(() => {
							this.$refs.logindialog.show();
							// this.authDialogShow = true;
						});
				}
			},
		},
		computed: {}
	};
</script>

<style scoped>
	.more {
		font-size: 26rpx;
		color: #999999
	}

	.player_list_li {
		/* margin-bottom: 30rpx; */
		/* box-shadow: 5rpx 5rpx 5rpx 5rpx #F8F8F8; */
	}

	.player_list_img {
		position: relative;
		height: 345rpx;
		border-radius: 25rpx;
		/* background-color: lightpink; */
	}

	.player_look {
		color: #FF563D;
		background: rgba(255, 86, 61, 0.1);
		border-radius: 25rpx;
		font-size: 28rpx;
		height: 50rpx;
		width: 110rpx;
		text-align: center;
		line-height: 50rpx;
		position: absolute;
		right: 30rpx;
		margin-top: 25rpx;
	}

	.player_list_coverImage {
		width: 100%;
		height: 100%;
		border-radius: 25rpx;
	}

	.player_list_title {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 700;
		padding-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		width: 80%;
	}

	.player_list_status {
		height: 46rpx;
		padding: 0 15rpx;
		font-size: 26rpx;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.replayo_nlookers {
		height: 46rpx;
		padding: 0 15rpx;
		font-size: 26rpx;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
		position: absolute;
		padding-left: 90rpx;
		top: 0;
		left: 0;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2)
	}

	.status_living {
		background: linear-gradient(to right, #FF7A45, #FF4545);
		color: #ffffff;
		z-index: 1;
	}

	.living_nlookers {
		height: 46rpx;
		padding: 0 15rpx;
		font-size: 24rpx;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
		position: absolute;
		padding-left: 110rpx;
		top: 0;
		left: 0;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2)
	}

	.status_default {
		background: linear-gradient(to right, #FFC445, #FF9845);
		color: #ffffff;
	}

	.status_finish {
		background-color: #999999;
		color: #ffffff;
	}

	.status_replay {
		background: linear-gradient(to right, #6C45FF, #45A5FF);
		z-index: 1;
		color: #ffffff;
	}

	.player_list_prompt {
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.player_list_prompt p {
		font-size: 28rpx;
		color: #666666;
	}

	.player_list_like {
		position: absolute;
		bottom: 20rpx;
		right: 30rpx;
	}

	.thumbupCount {
		position: absolute;
		/* width: 64rpx; */
		padding: 0 10rpx;
		height: 30rpx;
		color: #FFFEFE;
		font-size: 26rpx;
		background-color: rgba(0, 0, 0, 0.1);
		border-top-left-radius: 15rpx;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 25rpx;
		bottom: 0rpx;
		right: 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
